<template>
    <div class="cont">
        <div class="cont-table">
            <Table border stripe :columns="columns" :data="data" @on-selection-change="selectOne" :loading="load"></Table>
        </div>

        <Modal v-model="prompt" :title="title" :loading="true" @on-ok="handleSubmit('form')" ok-text="保存">
            <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">
                <FormItem label="检查项名称" prop="name.zh">
                    <Input v-model="form.name.zh" placeholder="输入检查项名称"></Input>
                </FormItem>
            </Form>
        </Modal>

        <!-- <div class="cont-page">
            <Page :total="pageDate.total" :page-size="pageDate.per_page" :current="pageDate.current_page"
                @on-change="queryData" show-total></Page>
        </div> -->
    </div>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        },
        majoritem: Number,
    },
    data () {
        return {
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            form:{
                name: {
                    zh: '',
                    en: '',
                    mn: '',
                },
                pid: this.condition,
                sort: '0',
                watchlists_id: this.majoritem,
            },
            langs: {
                zh: '',
                en: '',
                mn: '',
            },
            prompt: false,
            title: '添加数据',
            load: true,
            data: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '检查项名称',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name= params.row.name.zh?params.row.name.zh:params.row.name.mn;
                        return h('div', name);
                       
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 250,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'edit',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.UpdateData(params.row)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: `您确定要删除这条德育项吗?`,
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.del = [params.row.watchlists_check_id]
                                        this.delSubmit()
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, '删除')
                            ])
                        ]);
                    }
                }
            ],

            checkid: null,

            url: `api/watchlists/v1/securityitem/getPidData`,

            addurl: 'api/watchlists/v1/securityitem/add',
            editurl: 'api/watchlists/v1/securityitem/edit/',
            
            ruleValidate: {
                watchlists_id: [
                    { required: true, type: 'number', message: '输选择值班项', trigger: 'change' }
                ],
                data: [
                    { required: true, type: 'array', message: '输选择值班老师', trigger: 'change' }
                ],
                'name.zh': [
                    { required: true, message: '输入检查项名称', trigger: 'blur' }
                ]
            },

            del: [],
            delUrl: 'api/watchlists/v1/securityitem/del/',
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 修改数据
         * 
         ************************************************************/
        UpdateData (data) {
            this.checkid = data.watchlists_check_id
            this.form.name = {...data.name}
            this.prompt = true
        },
        
        /************************************************************
         * 
         * 删除确认
         * 
         ************************************************************/
        delConfirm () {
            if (this.del.length) {
                this.$Modal.confirm({
                    title: '删除确认',
                    closable: true,
                    loading: true,
                    content: '您确定要删除这些数据吗?',
                    onOk: () => {
                        this.delSubmit ()
                    }
                })
            }
        },
        
        /************************************************************
         * 
         * 批量删除选择
         * @param   {index}          选择的数据
         * 
         ************************************************************/
        selectOne (index) {
            this.del = []
            index.forEach(item => {
                this.del.push(item.watchlists_check_id)
            });
        },
        
        /************************************************************
         * 
         * 执行删除
         * 
         ************************************************************/
        delSubmit () {
            if(this.del.length == 0){
                this.$Message.info('请选择删除项')
                return
            }
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl + this.del).then(val=>{
                this.data = []
                this.load = true
                this.queryData ()
                this.$Modal.remove()
            }).catch(err => {
                this.$Modal.remove()
            })
        },
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (this.checkid) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        addData () {
            this.checkid = null
            this.title = '添加数据'
            this.prompt = true
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            let data = Object.assign({}, this.form)
            this.$http.post(this.addurl, data).then(val=>{
                this.prompt = false
                this.data = []
                this.load = true
                this.queryData ()
                this.form.name = {...this.langs}
            }).catch(err => {
                this.prompt = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            let data = Object.assign({}, this.form)
            this.$http.put(this.editurl + this.checkid, data).then(val=>{
                this.prompt = false
                this.data = []
                this.load = true
                this.queryData ()
                this.form.name = {...this.langs}
            }).catch(err => {
                this.prompt = false 
            })
        },
        
        /************************************************************
         * 
         * 列表数据
         * 
         ************************************************************/
        queryData () {
            let params = {
                id: this.condition
            }
            this.$http.get(this.url, { params }).then(val=>{
                this.data = val.data.child
                this.load = false
            }).catch(err => {
                this.load = false 
            })
        }
    },
    created () {
        this.queryData ()
    },
}
</script>
<style scoped>
.cont{
    width: 100%;
    height: 100%;
    position: relative;
}
.cont .cont-table{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 10px;
    overflow: auto;
}
.cont .cont-page{
    height: 43px;
    padding-top: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #dddee1;
}
</style>
